<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <testText></testText>
    <el-button @click="dr(DR_TYPE.top.type)" type="primary">{{DR_TYPE.top.label}}</el-button>
    <el-button @click="dr(DR_TYPE.bottom.type)" type="primary">{{DR_TYPE.bottom.label}}</el-button>
    <el-button @click="dr(DR_TYPE.right.type)" type="primary">{{DR_TYPE.right.label}}</el-button>
    <el-button @click="dr(DR_TYPE.left.type)" type="primary">{{DR_TYPE.left.label}}</el-button>
    <div>{{state.y}}-{{state.x}}</div>
    <div class="list">
      <div v-for="(arr, i) in testArr" :key="i" class="row">
        <div v-for="(item, j) in arr" :key="j" :class="['item', {'select': `${state.y}-${state.x}` === `${item.y}-${item.x}`}]" @click="selectItem(item)">
          {{ item.y}}-{{ item.x }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import {
  useMapChart
} from '@/algorithm/chart'
const msg = 'Hello World!'
const testText = ({ msg = '自我进步' }) => {
  return <div>{msg}</div>
}
const { testArr, state, dr, DR_TYPE, selectItem } = useMapChart({
  max: 15,
  map: new Map()
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.list {
  .row {
    display: flex;
    text-align: center;
    justify-content: center;
    .item {
      width: 50px;
      height: 50px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    .item:hover{
      background-color: antiquewhite;
    }
    .select {
      background-color: #42b983;
    }
    .select:hover{
      background-color: #42b983;
    }
  }
}
</style>
